import React, { Component } from "react";
import moment from "moment";
import { DatePicker, Radio, Button } from "antd";

import styles from "./index.less";

const { RangePicker } = DatePicker;

export default class DateItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.getTimeDistance("date", 15),
      selectedDate: [],
      open: false,
      close: false,
      disabled: true,
      butnvalue: "1"
    };
  }

  getTimeDistance = (type, num = 1) => {
    const now = new Date();
    const oneDay = 1000 * 60 * 60 * 24;

    if (type === "date") {
      now.setHours(0);
      now.setMinutes(0);
      now.setSeconds(0);
      return [moment(now).subtract(num - 1, "days"), moment(now)];
    }
    if (type === "month") {
      // 近 * 月
      const beforeDate = moment(now)
        .startOf("month")
        .subtract(num - 1, "months");
      const endDate = moment(now).endOf("month");
      return [moment(beforeDate), moment(endDate)];
    }
    return [moment(now), moment(now.getTime() + (oneDay - 1000))];
  };

  handleDisabledDate = current => {
    const { selectedDate = [] } = this.state;
    return selectedDate[0]
      ? current > moment(selectedDate[0]).add(365, "days") ||
          current < moment(selectedDate[0])
      : false;
  };

  handleCalendarChange = date => {
    this.setState({
      selectedDate: date
    });
  };

  onSaveDate = () => {
    const { onChange = () => {} } = this.props;
    const { value } = this.state;
    const date = [];
    date[0] = value[0] ? moment(value[0]).format("YYYY-MM-DD 00:00:00") : "";
    date[1] = value[0] ? moment(value[1]).format("YYYY-MM-DD 23:59:59") : "";

    onChange({ date });
  };

  handleOpenChange = () => {
    this.setState(
      {
        selectedDate: [],
        close: true
      },
      () => {
        this.handleDisabledDate();
      }
    );
  };

  selectDate = (type, num = 1) => {
    this.setState(
      {
        value: this.getTimeDistance(type, num)
      }
      /* () => {
        this.onSaveDate();
      } */
    );
  };

  handleChange = value => {
    this.setState({ value } /* , () => {
      this.onSaveDate();
    } */);
  };

  searchDate = () => {
    // const { /* getTrendListData, */ handleSetStates } = this.props;

    this.setState(() => {
      this.onSaveDate();
    });
    /* handleSetStates('4'); */
  };

  render() {
    const { value, disabled } = this.state;
    const { handleSetStates } = this.props;

    return (
      <div className={styles.root}>
        <div style={{ marginTop: 3 }}>
          <Radio.Group
            size="small"
            style={{ width: 145 }}
            className={styles.radioBut}
            value={this.state.butnvalue}
          >
            <Radio.Button
              value="1"
              onClick={() => {
                this.selectDate("date", 15);
                this.setState({ disabled: true, butnvalue: "1" });
                handleSetStates("1");
              }}
            >
              最近15天
            </Radio.Button>
            <Radio.Button
              value="2"
              onClick={() => {
                this.selectDate("date", 30);
                this.setState({ disabled: true, butnvalue: "2" });
                handleSetStates("2");
              }}
            >
              最近30天
            </Radio.Button>
            <Radio.Button
              value="3"
              onClick={() => {
                this.selectDate("month", 12);
                this.setState({ disabled: true, butnvalue: "3" });
                handleSetStates("3");
              }}
            >
              最近12月
            </Radio.Button>
            <Radio.Button
              value="4"
              onClick={() => {
                this.setState({ disabled: false, butnvalue: "4" });
                /* handleSetStates('4'); */
              }}
            >
              自定义日期
            </Radio.Button>
          </Radio.Group>
        </div>
        <RangePicker
          disabled={disabled}
          value={value}
          onChange={this.handleChange}
          disabledDate={this.handleDisabledDate}
          onCalendarChange={this.handleCalendarChange}
          onOpenChange={this.handleOpenChange}
          style={{ width: 300, marginLeft: 140 }}
        />
        <div style={{ marginRight: -200 }}>
          <Button
            block
            type="primary"
            size="small"
            className={styles.butn}
            onClick={() => this.searchDate()}
          >
            查询
          </Button>
          <Button
            style={{ marginLeft: 10, fontSize: 11, height: 28, width: 80 }}
            onClick={() => {
              this.selectDate("date", 15);
              this.setState({ disabled: true, butnvalue: "1" });
              handleSetStates("1");
            }}
          >
            恢复默认
          </Button>
        </div>
      </div>
    );
  }
}
